<template>
  <div>
    <div class="tag">
      <el-tag
          v-for="tag in tags"
          style="margin-bottom:5px"
          :key="tag.userId"
          closable effect="plain" type="info" @close="closeTags(tag.userId)">
        {{tag.name}}
      </el-tag>
    </div>

    <el-input class="filter" placeholder="搜索人员" v-model="searchValue.name" clearable @input="filterUserChanged" >
      <i class="el-icon-search el-input__icon" slot="prefix"></i>
    </el-input>
    <div class="border">
      <el-row>
        <el-col :span="12" style="border-right: 1px solid #eee">
          <div class="treeHeight">
            <el-tree
              :data="cascaderList"
              node-key="id"
              :check-on-click-node="true"
              :highlight-current="true"
              :expand-on-click-node="false"
              :default-expand-all="true"
              @node-click="getNode"
            >
              <span class="custom-tree-node" slot-scope="{data}">
                <span class="label">{{ data.name }}</span>
              </span>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="treeHeight">
            <el-tree
              ref="tUser1"
              node-key="userId"
              show-checkbox
              :check-strictly="true"
              :data="tableData"
              :check-on-click-node="true"
              @check-change="getCheckedNodes">
              <span class="custom-tree-node" slot-scope="{data}">
                <span class="label">{{ data.name }}</span>
                <span>-</span>
                <span v-for="(item,index) in data.roleList" :key="index">{{item.roleName}}</span>
              </span>
            </el-tree>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="footer">
      <el-button @click="onCancel" type="default">取消</el-button>
      <el-button @click="onConfirm" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import {throttle} from '@/utils/utils'
export default {
  name: "ActorSelector",
  data() {
    return {
      cascaderList:[],
      searchValue:{
        name:'',
        deptId:'',
        current:1,
        size:500
      },
      tableData: [],
      tags:[],
    }
  },
  props:{
    defaultList:{
      type:Array,
      default:() => {[]}
    }
  },
  created(){
    this.getDeptTree()
    this.getUsers()
  },
  methods:{
    //获取组织架构
    getDeptTree(){
      this.$api.getDeptTree().then(res => {
        let list = []
        this.treeList(res.data,list)
        this.cascaderList = list
      })
    },
    //递归循环
    treeList(tree,newList){
      for (let i = 0 ; i < tree.length ; i++) {
        if(tree[i].children.length > 0){
          newList.push({
            name:tree[i].name,
            id:tree[i].id,
            children:[]
          })
          this.treeList(tree[i].children,newList[i].children)
        }else{
          newList.push({
            name:tree[i].name,
            id:tree[i].id
          })
        }
      }
    },
    //获取用户
    getUsers(){
      this.$api.getUserList(this.searchValue).then(res => {
        this.tableData = res.data.records
        let arr = []
        this.tags.map((item) => {
          arr.push(item.userId)
        })
        this.$refs.tUser1.setCheckedKeys(arr)
      })
    },
    getNode(data){
      this.searchValue.deptId = data.id
      this.getUsers();
    },
    //搜索
    filterUserChanged(){
      throttle(this.getUsers(),1000)
    },
    handleSelectionChange(data){
      this.tags = this.tags.concat(data);
    },
    getCheckedNodes(data,status){
      if(status){
        this.tags.push({
          userId:data.userId,
          name:data.name
        })
      }else{
        this.removeTags(data.userId)
      }
    },
    removeTags(userId){
      let idx = null
      this.tags.map((item,index) => {
        if(item.userId == userId){
          idx = index
        }
      })
      this.tags.splice(idx, 1);
    },
    closeTags(id){
      let arr = []
      this.tags.map((item,index) => {
        if(item.userId != id){
          arr.push(item.userId)
        }
      })
      this.$refs.tUser1.setCheckedKeys(arr)
      //this.removeTags(id)
    },
    
    onConfirm(){
      this.$emit('confirm',this.tags);
    },
    onCancel(){
      this.$emit('cancel');
    }
  },
}
</script>

<style scoped>
  .border,.border-plus{
    border: 1px solid #eee;
    border-top: 0;
  }
  .border-plus{
    border-top: 1px solid #eee;
  }
  .treeHeight{
    height: calc(100vh*0.30);
    min-height: 200px;
    overflow: auto;
    padding: 10px 0;
  }
  .treeHeight-plus{
    height: calc(100vh*0.30 + 31px) !important;
  }
  .tag{
    border: 1px solid #eee;
    padding: 10px 10px 0;
    text-align: left;
    height: 54px;
    overflow: auto;
    margin-bottom: 15px;
  }
  .funcBox{
    border-bottom: 1px solid #eee;
    text-align: left;
    padding: 10px;
  }
  .funcTitle{
    font-weight: bold;
    padding: 5px;
  }
  .funcNote{
    font-size: 11px;
    padding: 5px;
  }
  .el-tag + .el-tag{
    margin-left: 10px;
  }
  .footer{
    text-align: right;
    margin-top: 10px;
  }
</style>
<style>
  .filter>.el-input__inner{
    border-radius: 0 !important;
  }
  /*以下为滚动条样式*/
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height               : 6px;
    scrollbar-arrow-color: red;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius        : 5px;
    box-shadow           : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background           : rgba(0, 0, 0, 0.2);
    scrollbar-arrow-color: red;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background   : rgba(0, 0, 0, 0.1);
  }
</style>